<script setup>
import {ref, onMounted} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getBannerNavAPI} from "../../services";
import {BaseImgUrl, BaseURL, Version} from "../../utils/lshttp";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import {toMiniAppRedPage, toPageUtils} from "../../utils/utils";
import CacheImage from "../../components/CacheImage.vue";
import {getRemarkAPI} from "../../services/order";
import {useUserInfoStore} from "../../stores/modules/userInfo";
const useUser = useUserInfoStore() // 使用userInfoStore状态管理器

const props = defineProps({
  address: Object,
  pzList: {
    type: Array,
  },
  posterBanner: {
    type: Array,
  },
  newUser: {
    type: String,
  }
})
console.log("props.pzList?.length",props.pzList?.length)

// https://lsz.lszbg.com/imgs/images/logo_login.png
const emits = defineEmits(['toGFBWC', 'getBannerFun'])
const commonInfoStore = useCommonInfoStore()
const dataList = ref([])
const newUserVal = ref()
onLoad(async () => {
  const res = await getBannerNavAPI(5)
  dataList.value = res.result
  dataList.value.forEach((item) => {
    item.image = BaseURL + item.image
  })


  // #ifdef H5
  await commonInfoStore.initJSDKConfig()
  // #endif
})
onMounted(() => {
  // getStorageWithExpiry('countdownTime')
  // 页面加载执行倒计时
  countdownTimeFun()
})
const images = ref([
  BaseImgUrl + "/home/pz/pz.png",
  BaseImgUrl + "/home/pz/fan.png",
  BaseImgUrl + "/home/pz/gif.png",
  BaseImgUrl + "/home/pz/hb.png",
  BaseImgUrl + "/home/pz/mt.png",
])

const PZZQ = () => {
  console.log("props.address", props.address)
  uni.navigateTo({
    url: "/pages/index/pzzq_index?latitude="
        + props.address?.latitude + "&longitude="
        + props.address?.longitude + "&addressStr="
        + props.address?.recommend + "&newUser="
        + props.newUser
  })
}
const toGF = () => {
  emits('toGFBWC')
}
const toELMRedBag = () => {
  const item = {
    original_id: commonInfoStore.reward.popup[1].original_id,
    appid: commonInfoStore.reward.popup[1].appid,
    path: commonInfoStore.reward.popup[1].path
  }
  toMiniAppRedPage(item)
}
const toPage = async (item) => {
  await toPageUtils(item)
}

// banner跳转页面
const goToPage = async (item) => {
  console.log("goToPage===", item)
  await toPageUtils(item)
}
// 时间存储对象
const countdownTime = ref({
  countdown_year: 0,
  countdown_month: 0,
  countdown_day: 0,
  countdown_hour: 0,
  countdown_minute: 0,
  countdown_second: 0
})
// 计算倒计时时间
const countdownTimeFun = () => {
  // 获取当前时间，并传递给倒计时事件
  let now = new Date()
  let endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
  console.log('定时存储开始=', endTime, now)
  countdownTime.value.countdown_year = now.getFullYear()
  countdownTime.value.countdown_month = now.getMonth()
  countdownTime.value.countdown_day = now.getDate()
  countdownTime.value.countdown_hour = endTime.getHours() - now.getHours()
  countdownTime.value.countdown_minute = endTime.getMinutes() - now.getMinutes()
  countdownTime.value.countdown_second = endTime.getSeconds() - now.getSeconds()
  // setStorageWithExpiry('countdownTime', countdownTime.value, endTime.getTime() - now)
}
// 设置过期时间事件
/* const setStorageWithExpiry = (key, value, time) => {
  let now = new Date()
  let item = {
    value: value,
    expiry: now.getTime() + time
  }
  uni.setStorageSync(key, item)
} */
// 获取过期时间事件
/* const getStorageWithExpiry = (key) => {
  const item = uni.getStorageSync(key);
  if (!item) return null; // 数据不存在
  const now = Date.now();
  console.log('定时存储开始3=', now, item.expiry)
  if (now > item.expiry) {
    uni.removeStorageSync(key); // 数据已过期，删除它
    return null; // 返回null表示数据已过期或不存在
  }
  let nowTTime = new Date()
  let endTime = new Date(nowTTime.getFullYear(), nowTTime.getMonth(), nowTTime.getDate(), 23, 59, 59)
  console.log('定时存储开始=', endTime)
  countdownTime.value.countdown_year = nowTTime.getFullYear()
  countdownTime.value.countdown_month = nowTTime.getMonth()
  countdownTime.value.countdown_day = nowTTime.getDate()
  countdownTime.value.countdown_hour = endTime.getHours() - nowTTime.getHours()
  countdownTime.value.countdown_minute = endTime.getMinutes() - nowTTime.getMinutes()
  countdownTime.value.countdown_second = endTime.getSeconds() - nowTTime.getSeconds()
} */
// 倒计时时间到隐藏倒计时模块
// const isShowCountTimeUp = ref(true)
//倒计时时间到触发事件
/* const countTimeUpFun = () => {
  isShowCountTimeUp.value = false
} */


// 判断官返店铺是否审核，并给出要求提示，通过后台控制是否显示，默认为0
const remarkRem = ref({})
const getRemarkData = async () => {
  let res = await getRemarkAPI({
    version: Version,
  })
  remarkRem.value = res.result
  //console.log("getRemarkData==", remarkRem.value)
}
getRemarkData()
</script>

<template>
  <view v-if="pzList.length > 0" class="pmeg">
    <view class="pmeg_title">
      <view class="title_text">
        <text style="font-weight: bold">品质专区</text>
        <view class="sub_title">品质精选 享美食</view>
      </view>
      <view @click="PZZQ" class="title_more">
        <text>更多</text>
        <u-icon name="arrow-right" size="14" color="#666666"></u-icon>
      </view>
    </view>
    <view class="pmeg_content">
      <view class="pmeg_item" v-for="(item, index) in pzList.slice(0, 2)" :key="index" @click="toPage(item)">
        <view class="pmeg_item_img"><image :src="item.logo" style="width: 130rpx;height: 130rpx;object-fit: cover;"></image></view>
        <view class="pmeg_item_content">
          <view class="pmeg_item_title ellipsis-one-line">{{ item.name }}</view>
          <view class="pmeg_item_label ellipsis-one-line">{{ item.hot_title }}</view>
          <view class="pmeg_item_price">
            <!--<view class="pmeg_item_price_current"><text style="font-size: 24rpx">￥</text>{{(item?.minimum_amount - item?.min_amount).toFixed(1)}}</view>-->
            <view class="pmeg_item_price_current"><text style="font-size: 24rpx">￥</text>{{Number(item?.min_amount).toFixed(1)}}</view>
            <view class="pmeg_item_price_old"><text style="font-size: 24rpx">￥</text>{{ Number(item?.minimum_amount).toFixed(1) }}</view>
          </view>
        </view>
      </view>
      <!--<view v-else class="pmeg_empty">
        <view class="empty_text">没有数据</view>
        <u-empty :icon="BaseImgUrl + '/images/uView/u-data.jpg'" mode="data"></u-empty>
      </view>-->
    </view>
  </view>
  <!--<view class="top">
    <view class="one" @click="PZZQ">
      <view class="title_content">
        <image :src="images[0]" style="width: 32rpx;height: 32rpx"/>
        <view class="title1">品质专区</view>
      </view>
      <view style="">
        <swiper autoplay="true" circular="true" vertical="true" easing-function="easeInOutCubic" interval="5000"
                style="height: 250rpx">
          <swiper-item v-for="(item, index) in pzList" :key="index">
            <view style="position: relative">
              <view class="pz" style="position: absolute;left: 20rpx;z-index: 1">品质</view>
              <image :src="item.logo" style="margin: 0 20rpx;height: 180rpx;width: 180rpx;border-radius: 16rpx"></image>
              <view class="label">{{ item?.hot_title ? item?.hot_title : item.name }}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view v-if="remarkRem.is_show === 1" class="tow" style="position: relative" @click="toGF">
      <view class="title_content">
        <image :src="images[1]" style="width: 32rpx;height: 32rpx"/>
        <view class="title1" style="color: #333333">美团官返餐</view>
      </view>
      <view>
        <image :src="images[4]" style="margin: 20rpx 20rpx 0;height: 180rpx;width: 180rpx;"></image>
      </view>
      <view class="mt_btn">
        立即前往
      </view>
    </view>
    &lt;!&ndash; #ifdef APP-PLUS || MP&ndash;&gt;
    <view class="there" @click="toELMRedBag">
      <view class="title_content">
        <image :src="images[2]" style="width: 32rpx;height: 32rpx"/>
        <view class="title1" style="color: #333333">饿了么福利</view>
      </view>
      <image :src="images[3]" style="margin: 20rpx 20rpx 0;height: 180rpx;width: 180rpx; margin-left: calc(50% - 90rpx)"></image>
      <view class="elm_btn">
        立即领取
      </view>
    </view>
    &lt;!&ndash; #endif &ndash;&gt;
    &lt;!&ndash; #ifdef H5 &ndash;&gt;
    <view class="there" @click="toELMRedBag" style="position: relative">
      <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                            :username="commonInfoStore.reward.popup[1].original_id"
                            :path="commonInfoStore.reward.popup[1].path"
                            style="position: absolute;z-index: 1;left: 0;height: 100%;width: 100%;opacity: 0.01;background-color: #1db9ff;">
        <component :is="'script'" type='text/wxtag-template' style="display: block;">
          <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
        </component>
      </wx-open-launch-weapp>
      <view class="title_content">
        <image :src="images[2]" style="width: 32rpx;height: 32rpx"/>
        <view class="title1" style="color: #333333">饿了么福利</view>
      </view>
      <image :src="images[3]" style="margin: 20rpx 20rpx 0;height: 180rpx;width: 180rpx;"></image>
      <view class="elm_btn">
        立即领取
      </view>
    </view>
    &lt;!&ndash; #endif &ndash;&gt;
  </view>-->
  <view class="bottom" v-if="posterBanner.length>0">
    <swiper autoplay="true" circular="true" easing-function="easeInOutCubic" interval="3000"
             indicator-active-color="#FFFFFF" indicator-color="rgba(0,0,0,0.1)"
            style="height: 168rpx">
      <swiper-item v-for="(item, index) in posterBanner" :key="index">
        <view class="swiper_box" @click="goToPage(item)">
          <!--如果存在倒计时 v-if="countdownTime.countdown_second"-->
          <view class="count_down" >
            <!--倒计时 @change="onTimeChange" @timeup="countTimeUpFun"-->
            <uni-countdown
                :showDay="false"
                :hour="countdownTime.countdown_hour"
                :minute="countdownTime.countdown_minute"
                :second="countdownTime.countdown_second"
                color="#FD232F" background-color="#ffffff" splitorColor="#ffffff" />
            <!--<u-count-down
                :time="findcountdownThere(countdownTime)"
                format="HH:mm:ss"
                autoStart
                millisecond
                @change="onTimeChange"
            >
              <view class="time">
                <view class="time__custom">
                  <text v-if="timeData.hours > 0" class="time__custom__item">{{ timeData.hours>=10 ? timeData.hours : '0'+timeData.hours}}</text>
                  <text v-else class="time__custom__item">00</text>
                </view>
                <text class="time__doc">:</text>
                <view class="time__custom">
                  <text v-if="timeData.minutes > 0" class="time__custom__item">{{ timeData.minutes }}</text>
                  <text v-else class="time__custom__item">00</text>
                </view>
                <text class="time__doc">:</text>
                <view class="time__custom">
                  <text v-if="timeData.seconds > 0" class="time__custom__item">{{ timeData.seconds }}</text>
                  <text v-else class="time__custom__item">00</text>
                </view>
              </view>
            </u-count-down>-->
            <text class="count_down_text">后失效</text>
          </view>
          <!-- #ifdef H5 -->
          <view v-if="item.type === 4">
            <wx-open-launch-weapp id="launch-btn"
                                  :username="item.original_id" :path="item.path"
                                  style="position: absolute;z-index: 1;left: 0;height: 100%;width: 100%;opacity: 0.01;background-color: #1db9ff;">
              <component :is="'script'" type='text/wxtag-template' style="display: block;">
                <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
              </component>
            </wx-open-launch-weapp>
          </view>
          <!-- #endif -->
          <view @tap="toPage(item)">
            <cache-image :img-src="BaseURL+item.image"  width="100%" height="120rpx" :style="{borderRadius: '10rpx'}"></cache-image>
            <!--<image :src="BaseURL+item.image" style="height: 120rpx;width: 100%;border-radius: 10rpx"></image>-->
          </view>

          <!--          <image :src="BaseURL+item.image" style="height: 160rpx;width: 100%;border-radius: 10rpx" @click="toPage(item)"></image>-->
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style scoped lang="scss">
.pmeg{
  margin: 0 20rpx 20rpx;
  padding: 20rpx;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  border: 4rpx solid #FFFFFF;
}
.pmeg_title{
  width: 100%;
  height: 60rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  .title_text{
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #3D3D3D;
    .sub_title{
      margin-left: 20rpx;
      line-height: 34rpx;
      font-size: 24rpx;
      color: #B87349;
      padding: 10rpx 16rpx;
      background: linear-gradient( 270deg, rgba(254,243,231,0) 0%, #FEF3E7 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }
  }
  .title_more{
    display: flex;
    align-items: center;
    font-size: 24rpx;
    text-align: left;
    line-height: 34rpx;
    color: #666666;
  }
}

.pmeg_content{
  display: flex;
  justify-content: space-between;
  .pmeg_item{
    width: 48%;
    display: flex;
    align-items: center;
    .pmeg_item_img{
      width: 130rpx;
      height: 130rpx;
      border-radius: 16rpx;
      overflow: hidden;
    }
    .pmeg_item_content{
      flex: 1;
      padding-left: 10rpx;
      .pmeg_item_title{
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 40rpx;
      }
      .pmeg_item_label{
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
      }
      .pmeg_item_price{
        display: flex;
        align-items: center;
        .pmeg_item_price_current{
          font-size: 32rpx;
          color: #F4311B;
          line-height: 34rpx;
        }
        .pmeg_item_price_old{
          padding-left: 8rpx;
          font-size: 24rpx;
          color: #888888;
          line-height: 34rpx;
          text-decoration-line: line-through;
        }
      }
    }
  }
}

.bottom {
  height: 120rpx;
  padding: 0 20rpx;
  .swiper_box{
    height: 120rpx;
    width: 100%;
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;
    .count_down{
      position: absolute;
      bottom: 10rpx;
      left: calc(50% - 256rpx/2);
      z-index: 10;
      display: flex;
      align-items: center;
      .count_down_text{
        font-size: 24rpx;
        color: #FFFFFF;
        margin-left: 10rpx;
      }
    }
  }
}

.one {
  width: 226rpx;
  //flex: 1;
  margin-right: 10rpx;
  height: 316rpx;
  background: linear-gradient(180deg, #FDE9E0 0%, #FFFFFF 99%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 3rpx solid #FFFFFF;
}

.tow {
  //width: 226rpx;
  height: 316rpx;
  flex: 1;
  margin-right: 10rpx;
  background: linear-gradient(180deg, #FFF6E9 0%, #FFFFFF 99%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 3rpx solid #FFFFFF;
}

.there {
  width: 226rpx;
  height: 316rpx;
  flex: 1;
  position: relative;
  background: linear-gradient(180deg, #FFEAEA 0%, #FFFFFF 99%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 3rpx solid #FFFFFF;
}

.label {
  width: 180rpx;
  margin-left: 20rpx;
  margin-top: 6rpx;
  height: 48rpx;
  font-size: 24rpx;
  color: #E5750A;
  line-height: 48rpx;
  text-align: center;
  background: #FCEAE1;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  display: -webkit-box;
}

.title1 {
  font-weight: 400;
  font-size: 26rpx;
  color: #F03B30;
  margin-left: 10rpx;
}

.title_content {
  display: flex;
  align-items: center;
  margin: 20rpx 20rpx 10rpx;
}

.mt_btn {
  width: 180rpx;
  height: 48rpx;
  background: #FFEDCA;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-left: 20rpx;
  line-height: 48rpx;
  text-align: center;
  font-size: 24rpx;
  color: #FF9129;
  margin-top: -20rpx;
  position: absolute;
}

.elm_btn {
  width: 180rpx;
  height: 48rpx;
  background: #FEF0E5;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  line-height: 48rpx;
  text-align: center;
  font-size: 24rpx;
  color: #E5750A;
  margin: -10rpx auto 0;
  position: absolute;
  left: 0;
  right: 0;
}
.pz{
  color: #FFFFFF;
  font-size: 22rpx;
  width: 68rpx;
  height: 36rpx;
  background: rgba(0,0,0,0.4);
  border-radius: 16rpx 0 16rpx 0;
  text-align: center;
  line-height: 36rpx;
}

.pmeg_empty{
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .empty_text{
    font-size: 24rpx;
    text-align: center;
    color: #888888;
    width: 100%;
    padding: 20rpx;
  }
}
/* 倒计时css */
.time {
  @include flex;
  align-items: center;
  padding: 0 10rpx;
  &__custom {
    width: 20px;
    height: 20px;
    background: #FFFCEF;
    border-radius: 4px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;

    &__item {
      color: #FD232F;
      font-size: 24rpx;
      text-align: center;
    }
  }

  &__doc {
    color: #FFFCEF;
    padding: 0px 4px;
    font-size: 28rpx;
  }

  &__item {
    color: #606266;
    font-size: 15px;
    margin-right: 4px;
  }
}
</style>